<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: ZachGmy
 * @LastEditTime: 2022-06-15 09:50:02
-->
<template>
  <div class="DataStatistics">
    <!-- 中国地图容器 -->
    <div id="China" style="height: 600px"></div>
    <!-- 省份地图容器 -->
    <div id="Province" style="height: 600px"></div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 中国疫情数据
      chinaCovidData: [],
      liaoningCovidData: [],
    };
  },
  // 一般情况下，图表类的生成方式都是在mounted生命周期中去运行
  mounted() {
    // 获取中国疫情相关数据
    this.getChinaCovidData();
  },
  methods: {
    // 获取中国疫情相关数据
    getChinaCovidData() {
      axios({
        url: "https://api.muxiaoguo.cn/api/epidemic?type=epidemicInfectionData&api_key=6f46fea09e825b0b",
      }).then((res) => {
        console.log(res.data.data);
        this.chinaCovidData = res.data.data.map((item) => {
          return {
            name: item.provinceShortName,
            value: item.currentConfirmedCount,
          };
        });
        console.log(this.chinaCovidData);

        // 自动加载中国地图
        this.loadChinaMap();

        // 获取辽宁疫情相关数据
        let liaoningRes = res.data.data.filter((item) => {
          return item.provinceName == "辽宁省";
        });
        // console.log(liaoningRes[0].cities);
        this.liaoningCovidData = liaoningRes[0].cities.map((item) => {
          return {
            name: item.cityName,
            value: item.currentConfirmedCount,
          };
        });
        console.log(this.liaoningCovidData);
        // 自动加载辽宁地图
        this.loadliaoningMap();
      });
    },
    // 加载中国地图
    loadChinaMap() {
      // 初始化图表
      var map = new Highcharts.Map("China", {
        title: {
          text: "各省市现有疫情确诊情况",
        },
        // 颜色轴
        colorAxis: {
          dataClasses: [
            {
              color: "#fff",
              from: 0,
            },
            {
              color: "#FCE2D8",
              from: 1,
              to: 9,
            },
            {
              color: "#FC9783",
              from: 10,
              to: 99,
            },
            {
              color: "#F27466",
              from: 100,
              to: 999,
            },
            {
              color: "#E34445",
              from: 1000,
              to: 9999,
            },
            {
              color: "#E34445",
              from: 10000,
            },
          ],
        },
        series: [
          {
            data: this.chinaCovidData,
            name: "现存数量",
            mapData: Highcharts.maps["cn/china"],
            joinBy: "name", // 根据 name 属性进行关联
          },
        ],
        // 地图导航相关配置
        mapNavigation: {
          enableButtons: true, // 是否启用缩放按钮
        },
      });
    },
    // 加载辽宁地图
    loadliaoningMap() {
      // 初始化图表
      var map = new Highcharts.Map("Province", {
        title: {
          text: "辽宁省",
        },
        colorAxis: {
          min: 0,
          minColor: "rgb(255,255,255)",
          maxColor: "#006cee",
        },
        series: [
          {
            data: this.liaoningCovidData,
            name: "现存数量",
            mapData: Highcharts.maps["cn/liaoning"],
            joinBy: "name", // 根据 name 属性进行关联
          },
        ],
        // 地图导航相关配置
        mapNavigation: {
          enableButtons: true, // 是否启用缩放按钮
        },
      });
    },
  },
};
</script>

<style scoped>
</style>
